<html lang="ko"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>var __ez=__ez||{};__ez.stms=Date.now();__ez.evt={};__ez.script={};__ez.ck=__ez.ck||{};__ez.template={};__ez.template.isOrig=false;__ez.queue=function(){var e=0,i=0,t=[],n=!1,o=[],r=[],s=!0,a=function(e,i,n,o,r,s,a){var l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,d=this;this.name=e,this.funcName=i,this.parameters=null===n?null:p(n)?n:[n],this.isBlock=o,this.blockedBy=r,this.deleteWhenComplete=s,this.isError=!1,this.isComplete=!1,this.isInitialized=!1,this.proceedIfError=a,this.fWindow=l,this.isTimeDelay=!1,this.process=function(){f("... func = "+e),d.isInitialized=!0,d.isComplete=!0,f("... func.apply: "+e);var i=d.funcName.split("."),n=null,o=this.fWindow||window;i.length>3||(n=3===i.length?o[i[0]][i[1]][i[2]]:2===i.length?o[i[0]][i[1]]:o[d.funcName]),null!=n&&n.apply(null,this.parameters),!0===d.deleteWhenComplete&&delete t[e],!0===d.isBlock&&(f("----- F'D: "+d.name),u())}},l=function(e,i,t,n,o,r,s){var a=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,l=this;this.name=e,this.path=i,this.async=o,this.defer=r,this.isBlock=t,this.blockedBy=n,this.isInitialized=!1,this.isError=!1,this.isComplete=!1,this.proceedIfError=s,this.fWindow=a,this.isTimeDelay=!1,this.isPath=function(e){return"/"===e[0]&&"/"!==e[1]},this.getSrc=function(e){return void 0!==window.__ezScriptHost&&this.isPath(e)&&"banger.js"!==this.name?window.__ezScriptHost+e:e},this.process=function(){l.isInitialized=!0,f("... file = "+e);var i=this.fWindow?this.fWindow.document:document,t=i.createElement("script");t.src=this.getSrc(this.path),!0===o?t.async=!0:!0===r&&(t.defer=!0),t.onerror=function(){var e={url:window.location.href,name:l.name,path:l.path,user_agent:window.navigator.userAgent};"undefined"!=typeof _ezaq&&(e.pageview_id=_ezaq.page_view_id);var i=encodeURIComponent(JSON.stringify(e)),t=new XMLHttpRequest;t.open("GET","//g.ezoic.net/ezqlog?d="+i,!0),t.send(),f("----- ERR'D: "+l.name),l.isError=!0,!0===l.isBlock&&u()},t.onreadystatechange=t.onload=function(){var e=t.readyState;f("----- F'D: "+l.name),e&&!/loaded|complete/.test(e)||(l.isComplete=!0,!0===l.isBlock&&u())},i.getElementsByTagName("head")[0].appendChild(t)}},d=function(e,i){this.name=e,this.path="",this.async=!1,this.defer=!1,this.isBlock=!1,this.blockedBy=[],this.isInitialized=!0,this.isError=!1,this.isComplete=i,this.proceedIfError=!1,this.isTimeDelay=!1,this.process=function(){}};function c(e){!0!==h(e)&&0!=s&&e.process()}function h(e){if(!0===e.isTimeDelay&&!1===n)return f(e.name+" blocked = TIME DELAY!"),!0;if(p(e.blockedBy))for(var i=0;i<e.blockedBy.length;i++){var o=e.blockedBy[i];if(!1===t.hasOwnProperty(o))return f(e.name+" blocked = "+o),!0;if(!0===e.proceedIfError&&!0===t[o].isError)return!1;if(!1===t[o].isComplete)return f(e.name+" blocked = "+o),!0}return!1}function f(e){var i=window.location.href,t=new RegExp("[?&]ezq=([^&#]*)","i").exec(i);"1"===(t?t[1]:null)&&console.debug(e)}function u(){++e>200||(f("let's go"),m(o),m(r))}function m(e){for(var i in e)if(!1!==e.hasOwnProperty(i)){var t=e[i];!0===t.isComplete||h(t)||!0===t.isInitialized||!0===t.isError?!0===t.isError?f(t.name+": error"):!0===t.isComplete?f(t.name+": complete already"):!0===t.isInitialized&&f(t.name+": initialized already"):t.process()}}function p(e){return"[object Array]"==Object.prototype.toString.call(e)}return window.addEventListener("load",(function(){setTimeout((function(){n=!0,f("TDELAY -----"),u()}),5e3)}),!1),{addFile:function(e,i,n,s,a,d,h,f,u){var m=new l(e,i,n,s,a,d,h,u);!0===f?o[e]=m:r[e]=m,t[e]=m,c(m)},addDelayFile:function(e,i){var n=new l(e,i,!1,[],!1,!1,!0);n.isTimeDelay=!0,f(e+" ...  FILE! TDELAY"),r[e]=n,t[e]=n,c(n)},addFunc:function(e,n,s,l,d,h,f,u,m,p){!0===h&&(e=e+"_"+i++);var w=new a(e,n,s,l,d,f,u,p);!0===m?o[e]=w:r[e]=w,t[e]=w,c(w)},addDelayFunc:function(e,i,n){var o=new a(e,i,n,!1,[],!0,!0);o.isTimeDelay=!0,f(e+" ...  FUNCTION! TDELAY"),r[e]=o,t[e]=o,c(o)},items:t,processAll:u,setallowLoad:function(e){s=e},markLoaded:function(e){if(e&&0!==e.length){if(e in t){var i=t[e];!0===i.isComplete?f(i.name+" "+e+": error loaded duplicate"):(i.isComplete=!0,i.isInitialized=!0)}else t[e]=new d(e,!0);f("markLoaded dummyfile: "+t[e].name)}},logWhatsBlocked:function(){for(var e in t)!1!==t.hasOwnProperty(e)&&h(t[e])}}}();__ez.evt.add=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n()},__ez.evt.remove=function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):delete e["on"+t]};__ez.script.add=function(e){var t=document.createElement("script");t.src=e,t.async=!0,t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t)};__ez.dot={};__ez.queue.addFile('/detroitchicago/boise.js', '/detroitchicago/boise.js?gcb=195-2&cb=2', true, [], true, false, true, false);__ez.queue.addFile('/parsonsmaize/abilene.js', '/parsonsmaize/abilene.js?gcb=195-2&cb=28', true, [], true, false, true, false);</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ad_cache_level":1,"domain_id":173770,"ezcache_level":2,"ezcache_skip_code":0,"has_bad_image":0,"has_bad_words":0,"is_sitespeed":0,"lt_cache_level":0,"page_view_id":"3793ecdc-8e37-4482-75d7-6c4dc27e4952","response_size_orig":79124,"response_time_orig":4,"template_id":134,"url":"https://plantuml.com/ko/component-diagram","word_count":1765,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqBaseReady');</script>
<script type="text/javascript">(function(){function storageAvailable(type){var storage;try{storage=window[type];var x='__storage_test__';storage.setItem(x,x);storage.removeItem(x);return true;}
catch(e){return e instanceof DOMException&&(e.code===22||e.code===1014||e.name==='QuotaExceededError'||e.name==='NS_ERROR_DOM_QUOTA_REACHED')&&(storage&&storage.length!==0);}}
function remove_ama_config(){if(storageAvailable('localStorage')){localStorage.removeItem("google_ama_config");}}
remove_ama_config()})()</script>
<script type="text/javascript">var ezoicTestActive = true</script>
<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({}, typeof window._ezaq !== "undefined" ? window._ezaq : {}, {"ab_test_id":"mod174-c","ad_cache_level":1,"ad_count_adjustment":0,"ad_lazyload_version":0,"ad_load_version":1,"ad_location_ids":"","adx_ad_count":0,"ai_placeholder_cache_level":1,"ai_placeholder_placement_cnt":-1,"bidder_method":1,"bidder_version":3,"city":"Krasnoyarsk","country":"RU","days_since_last_visit":-1,"display_ad_count":0,"domain_id":173770,"domain_test_group":20230802,"ds_adsize_opt_id":-1,"engaged_time_visit":0,"ezcache_level":2,"ezcache_skip_code":0,"form_factor_id":1,"framework_id":1,"has_bad_image":0,"has_bad_words":0,"iab_category":"","iab_category_0":"596","is_embed":false,"is_from_recommended_pages":false,"is_return_visitor":false,"is_sitespeed":0,"last_page_load":"","last_pageview_id":"","lt_cache_level":0,"max_ads":0,"metro_code":0,"optimization_version":1,"page_ad_positions":"","page_view_count":281,"page_view_id":"3793ecdc-8e37-4482-75d7-6c4dc27e4952","position_selection_id":0,"postal_code":"660000","pv_event_count":0,"response_size_orig":79124,"response_time_orig":4,"serverid":"i-04f761e224293888a","state":"KYA","sub_page_ad_positions":"","t_epoch":1697690909,"template_id":134,"time_on_site_visit":0,"url":"https://plantuml.com/ko/component-diagram","word_count":1765,"worst_bad_word_level":0});__ez.queue.markLoaded('ezaqReady');</script>
<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>__ez.queue.addFile('/parsonsmaize/mulvane.js', '/parsonsmaize/mulvane.js?gcb=195-2&cb=5', true, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/parsonsmaize/olathe.js', '/parsonsmaize/olathe.js?gcb=195-2&cb=20', false, ['/parsonsmaize/abilene.js','/parsonsmaize/mulvane.js'], true, false, true, false);__ez.queue.addFile('/porpoiseant/et.js', '/porpoiseant/et.js?gcb=195-2&cb=2', false, [], true, false, true, false);!function(){var e;__ez.vep=(e=[],{Add:function(i,t){__ez.dot.isDefined(i)&&__ez.dot.isValid(t)&&e.push({type:"video",video_impression_id:i,domain_id:__ez.dot.getDID(),t_epoch:__ez.dot.getEpoch(0),data:__ez.dot.dataToStr(t)})},Fire:function(){if(void 0===document.visibilityState||"prerender"!==document.visibilityState){if(__ez.dot.isDefined(e)&&e.length>0)for(;e.length>0;){var i=5;i>e.length&&(i=e.length);var t=e.splice(0,i),o=__ez.dot.getURL("/detroitchicago/grapefruit.gif")+"?orig="+(!0===__ez.template.isOrig?1:0)+"&v="+btoa(JSON.stringify(t));__ez.dot.Fire(o)}e=[]}}})}();</script><script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>!function(){function e(i){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e(i)}__ez.pel=function(){var i=[];function t(t,o,d,_,n,r,a,s){if(__ez.dot.isDefined(t)&&0!=__ez.dot.isAnyDefined(t.getSlotElementId,t.ElementId)){void 0===s&&(s=!1);var p=parseInt(__ez.dot.getTargeting(t,"ap")),f=__ez.dot.getSlotIID(t),u=__ez.dot.getAdUnit(t,s),z=parseInt(__ez.dot.getTargeting(t,"compid")),g=0,c=0,l=function(i){if("undefined"==typeof _ezim_d)return!1;var t=__ez.dot.getAdUnitPath(i).split("/").pop();if("object"===("undefined"==typeof _ezim_d?"undefined":e(_ezim_d))&&_ezim_d.hasOwnProperty(t))return _ezim_d[t];for(var o in _ezim_d)if(o.split("/").pop()===t)return _ezim_d[o];return!1}(t);"object"==e(l)&&(void 0!==l.creative_id&&(c=l.creative_id),void 0!==l.line_item_id&&(g=l.line_item_id)),__ez.dot.isDefined(f,u)&&__ez.dot.isValid(o)&&("0"===f&&!0!==s||""===u||i.push({type:"impression",impression_id:f,domain_id:__ez.dot.getDID(),unit:u,t_epoch:__ez.dot.getEpoch(0),revenue:d,est_revenue:_,ad_position:p,ad_size:"",bid_floor_filled:n,bid_floor_prev:r,stat_source_id:a,country_code:__ez.dot.getCC(),pageview_id:__ez.dot.getPageviewId(),comp_id:z,line_item_id:g,creative_id:c,data:__ez.dot.dataToStr(o),is_orig:s||__ez.template.isOrig}))}}function o(){void 0!==document.visibilityState&&"prerender"===document.visibilityState||(__ez.dot.isDefined(i)&&i.length>0&&[i.filter((function(e){return e.is_orig})),i.filter((function(e){return!e.is_orig}))].forEach((function(e){for(;e.length>0;){var i=e[0].is_orig||!1,t=5;t>e.length&&(t=e.length);var o=e.splice(0,t),d=__ez.dot.getURL("/porpoiseant/army.gif")+"?orig="+(!0===i?1:0)+"&sts="+btoa(JSON.stringify(o));(void 0!==window.isAmp&&isAmp||void 0!==window.ezWp&&ezWp)&&void 0!==window._ezaq&&_ezaq.hasOwnProperty("domain_id")&&(d+="&visit_uuid="+_ezaq.visit_uuid),__ez.dot.Fire(d)}})),i=[])}return{Add:t,AddAndFire:function(e,i){t(e,i,0,0,0,0,0),o()},AddAndFireOrig:function(e,i){t(e,i,0,0,0,0,0,!0),o()},AddById:function(e,t,o,d){var _=e.split("/");if(__ez.dot.isDefined(e)&&3===_.length&&__ez.dot.isValid(t)){var n=_[0],r={type:"impression",impression_id:_[2],domain_id:__ez.dot.getDID(),unit:n,t_epoch:__ez.dot.getEpoch(0),pageview_id:__ez.dot.getPageviewId(),data:__ez.dot.dataToStr(t),is_orig:o||__ez.template.isOrig};void 0!==d&&(r.revenue=d),i.push(r)}},Fire:o,GetPixels:function(){return i}}}()}();__ez.queue.addFile('/detroitchicago/raleigh.js', '/detroitchicago/raleigh.js?gcb=195-2&cb=6', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/vista.js', '/detroitchicago/vista.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFile('/detroitchicago/tampa.js', '/detroitchicago/tampa.js?gcb=195-2&cb=5', false, ['/parsonsmaize/abilene.js'], true, false, true, false);</script><base href=""/><meta name="flattr:id" content="1ew3x0"/><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "https://plantuml.com",
  "name": "PlantUML",
  "sameAs" : ["https://twitter.com/plantuml","https://en.wikipedia.org/wiki/PlantUML","https://www.wikidata.org/wiki/Q18346546"],
  "logo": "https://cdn-0.plantuml.com/logo3.png",
  "contactPoint": [{
    "@type": "ContactPoint",
    "email": "plantuml@gmail.com",
    "url": "https://plantuml.com",
    "contactType": "customer service"
  }]
}
</script><script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://plantuml.com",
      "name": "Home"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://plantuml.com/sitemap-language-specification",
      "name": "Language specification"
    }
  },{
    "@type": "ListItem",
    "position": 3,
    "item": {
      "@id": "https://plantuml.com/component-diagram",
      "name": "Component Diagram"
  }
  }]
}
</script><link rel="canonical" href="component-diagram.html"/><link rel="alternate" hreflang="x-default" href="../component-diagram.html"/><link rel="alternate" hreflang="de" href="../de/component-diagram.html"/><link rel="alternate" hreflang="en" href="../component-diagram.html"/><link rel="alternate" hreflang="es" href="../es/component-diagram.html"/><link rel="alternate" hreflang="fr" href="../fr/component-diagram.html"/><link rel="alternate" hreflang="ja" href="../ja/component-diagram.html"/><link rel="alternate" hreflang="ru" href="../ru/component-diagram.html"/><link rel="alternate" hreflang="ko" href="component-diagram.html"/><link rel="alternate" hreflang="zh" href="../zh/component-diagram.html"/><link rel="shortcut icon" href="../favicon.ico"/><link rel="preload" as="image" href="../svgrepo-house.svg"/><link rel="preload" as="image" href="../svgrepo-text-news.svg"/><link rel="preload" as="image" href="../svgrepo-rocket-3-start.svg"/><link rel="preload" as="image" href="../svgrepo-server.svg"/><link rel="preload" as="image" href="../svgrepo-play.svg"/><link rel="preload" as="image" href="../svgrepo-forum.svg"/><link rel="preload" as="image" href="../svgrepo-add-to-online-cart.svg"/><link rel="preload" as="image" href="../svgrepo-forum-message.svg"/><link rel="preload" as="image" href="../svgrepo-palette-fill.svg"/><link rel="preload" as="image" href="../svgrepo-cpu.svg"/><link rel="preload" as="image" href="../svgrepo-books-library.svg"/><link rel="preload" as="image" href="../svgrepo-signpost-fill.svg"/><link rel="preload" as="image" href="../svgrepo-library.svg"/><link rel="preload" as="image" href="../flags21.png"/><link rel="preload" as="image" href="../svgrepo-uxwing-light-mode-toggle.svg"/><title>구성 요소 다이어그램 구문 및 기능</title><meta name="description" content="PlantUML 구성 요소 다이어그램 구문 : 당신은 정의 할 수 있습니다 인터페이스, 구성 요소, 관계, 그룹, 메모 ... 변경 글꼴과 색상도 가능하다."/><meta property="og:type" content="article"/><meta property="og:title" content="구성 요소 다이어그램 구문 및 기능"/><meta property="og:description" content="PlantUML 구성 요소 다이어그램 구문 : 당신은 정의 할 수 있습니다 인터페이스, 구성 요소, 관계, 그룹, 메모 ... 변경 글꼴과 색상도 가능하다."/><meta property="og:url" content="https://plantuml.com/ko/component-diagram"/><meta property="og:site_name" content="PlantUML.com"/><meta name="twitter:image" content="https://plantuml.com/og-component-diagram"/><meta property="og:locale" content="ko"/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="구성 요소 다이어그램 구문 및 기능"/><meta name="twitter:description" content="PlantUML 구성 요소 다이어그램 구문 : 당신은 정의 할 수 있습니다 인터페이스, 구성 요소, 관계, 그룹, 메모 ... 변경 글꼴과 색상도 가능하다."/><meta name="twitter:site" content="@PlantUML"/><meta name="twitter:creator" content="@PlantUML"/><style>li{margin:2px}#external li{margin:13px}.pezoic{max-width:970px}@media screen and (max-width:1600px){.pezoic{max-width:768px}}.coptable{max-width:90%}.mytab{display:inline-block;border-radius:3px;border:1px solid #e1e4e8}.mytab:hover{border:1px dashed #0366d6;cursor:pointer;color:#0366d6;background:#f6f8fa}.cop{margin:25px 10px 0 10px}.cop:hover{cursor:pointer;filter:invert(30%) sepia(75%) saturate(4001%) hue-rotate(201deg) brightness(88%) contrast(98%)}.cop2{margin:25px 10px 0 10px}.cop2:hover{cursor:pointer}.msg{position:absolute;color:#396;background-color:#FFF;margin-top:55px;display:none;border-radius:3px;border:1px solid #4dff00}.mycell0{float:left;vertical-align:top;padding:10px}.mycell0 code:hover{cursor:default;color:#000}.mycell{float:right;vertical-align:top;padding:10px;max-width:55vw;overflow-x:auto}.mycell0 pre{max-width:55vw;overflow-x:auto}.cod{background:#edeff3;padding:2px 5px;border-radius:3px}.colo{display:inline-block;background:#edeff3;padding:7px 12px;border-radius:3px}.tag,.tagg,.tago,.tagr{text-rendering:optimizeLegibility;display:inline-block;padding:3px 5px 2px 4px;text-decoration:none;white-space:nowrap;border:1px solid #999;text-transform:uppercase;text-align:center;border-radius:3px;font-size:11px;font-weight:bold;line-height:90%}.tag{background-color:#eee}.tagg{background-color:#98fb98}.tago{background-color:#fafa00}.tagr{background-color:#ff4500}a{text-decoration:none;color:#0366d6}a:hover{text-decoration:underline}.menu1{border:0;font-family:Helvetica,sans-serif;font-size:14px;padding:0;margin:0;white-space:nowrap;overflow:hidden;vertical-align:middle;line-height:30px}.menu1 a{text-align:center;padding:10px 7px 10px 7px;text-decoration:none;color:#637282}.menu1 a:hover{color:#0366d6}#menu0{top:0;z-index:4;margin:0 0 0 10px;padding:0}@media screen and (max-width:1200px){#menu0{visibility:hidden}}.mhov img{margin:0 5px 0 0;padding:0}.mhov:hover{filter:invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%)}#menuside2{border:0;font-family:Helvetica,sans-serif;font-size:14px;padding:20px 0 4px 0;margin:0}#menuside2 span{vertical-align:top}#menuside2 li{list-style:none;position:relative;padding:0;margin:10px 20px 10px 10px;border:0}#menuside2 li a{display:inline-block;text-decoration:none;color:#637282;width:100%}#BC{z-index:0;padding-top:5px;top:35px}.breadcrumb{z-index:1;font-family:Helvetica,sans-serif;font-size:14px;text-align:center;display:inline-block;overflow:hidden;border-radius:5px}.breadcrumb a{text-decoration:none;outline:0;display:block;float:left;font-size:12px;line-height:24px;color:#373f49;padding:0 10px 0 35px;background:#f0f1f1;background:linear-gradient(#f0f1f1,#c6d2d2);position:relative}.breadcrumb a:first-child{padding-left:21px;border-radius:5px 0 0 5px}.breadcrumb a:first-child:before{left:14px}.breadcrumb a:last-child{visibility:hidden}.breadcrumb a.active,.breadcrumb a:hover{color:#0366d6;background:#c6d2d2;background:linear-gradient(#e3e4e4,#b8c7c7)}.breadcrumb a.active:after,.breadcrumb a:hover:after{background:#c6d2d2;background:linear-gradient(135deg,#e3e4e4,#b8c7c7)}.breadcrumb a:after{content:'';position:absolute;top:0;right:-12px;width:24px;height:24px;transform:scale(0.707) rotate(45deg);z-index:1;background:#f0f1f1;background:linear-gradient(135deg,#f0f1f1,#c6d2d2);box-shadow:2px -2px 0 2px rgba(0,0,0,0.1),3px -3px 0 2px rgba(255,255,255,0.1);border-radius:0 5px 0 50px}.breadcrumb a:last-child:after{content:none;visibility:hidden}.lga,.lga a,.lgi,.lgi a{font-family:Helvetica,sans-serif;font-size:13px;text-align:center;color:#fff;padding:0 5px;margin:0}.lga,.lga a{background-color:#008}.lgi,.lgi a{background-color:#888}.lga:hover,.lga:hover a{text-decoration:none;color:#BBB}.lgi:hover,.lgi:hover a{text-decoration:none;color:#CCC}</style><style>.backtop{margin:0 10px}.backtop:hover{cursor:pointer;filter:invert(30%) sepia(75%) saturate(4001%) hue-rotate(201deg) brightness(88%) contrast(98%)}</style><style>.dropbtn{padding:0;border:0;background:0}.dropdown{position:relative;display:inline-block;margin:0 10px}.dropdown-content{display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0 8px 16px 0 rgba(0,0,0,0.2);z-index:1}.dropdown-content img{vertical-align:middle;margin:0 8px 0 1px}.dropdown-content a{font-size:small;font-weight:normal;color:black;padding:5px 10px;text-decoration:none;display:block}.dropdown-content a:hover{background-color:#ddd;color:#0366d6}.dropdown:hover .dropdown-content{display:block}.dropdown:hover .dropbtn{background-color:#3e8e41}</style><style>#flex1{margin:0;padding:0;display:flex;flex-direction:row;width:378px;height:100%}#lll{flex-grow:1;flex-shrink:1;max-width:162px;overflow:hidden}#mmm{flex-grow:0;flex-shrink:0;background:#edeff3;width:210px;min-width:210px;max-width:210px;flex-grow:0;flex-shrink:0;border-left:1px solid #d4d8de}#qqq{flex-grow:0;flex-shrink:0;width:4px;min-width:4px;max-width:4px;flex-grow:0;flex-shrink:0}#rrr{flex-grow:1;flex-shrink:1;max-width:162px;overflow:hidden}.cde{display:flex;flex-direction:column;justify-content:space-between;height:100%}.cd{display:flex;flex-direction:column;justify-content:space-start;height:100%}.aaa{height:30px;min-height:30px;max-height:30px;flex-grow:0;flex-shrink:0;background:#edeff3;border-bottom:1px solid #d4d8de}.bbb,.bbborder{flex-grow:1;flex-shrink:0}.bbborder{border-left:1px solid #d4d8de}#header{z-index:10;position:fixed;left:378px;right:0;height:30px;top:0;background:#edeff3;border-bottom:1px solid #d4d8de}#header2{z-index:7;position:fixed;left:378px;right:0;height:10px;top:30px;background:#fefefe}#left0{top:0;position:fixed;left:0;margin:0;bottom:0;width:378px;padding:0;z-index:2}#root{padding:0;margin:40px 0 0 388px;background:#fefefe}body{margin:auto;overflow-x:hidden;background:#fefefe}@media screen and (max-width:1190px){#flex1,#left0{width:215px}#root{margin:40px 0 0 224px}#header,#header2{left:215px}#left0{left:0}#lll,#rrr{width:0;visibility:hidden;flex-grow:0;flex-shrink:0}}@media screen and (max-width:1010px){#root{margin:0 0 0 216px}#header,#header2{display:none}#lll,#qqq{width:0;visibility:hidden;flex-grow:0;flex-shrink:0}#mmm{border-right:1px solid #d4d8de}}@media screen and (min-width:1700px){#header,#header2{left:518px}#left0,#flex1{width:518px}#root{margin-left:528px}#lll,#rrr{max-width:302px}}</style><script>window.pushMST_config={vapidPK:"BBodn2vLFoDO5AdCfmOOzNmcUsn52kTA6JNZNYVFymzEdWHonz_bkUcsaTkPXHvNGRkRUSAxMbup-H0l2sb1h_Q",enableOverlay:true,swPath:"/sw.js",i18n:{}};var pushmasterTag=document.createElement("script");pushmasterTag.src="https://cdn.pushmaster-cdn.xyz/scripts/publishers/629f5e297baecc00098a271b/SDK.js";pushmasterTag.setAttribute("defer","");var firstScriptTag=document.getElementsByTagName("script")[0];firstScriptTag.parentNode.insertBefore(pushmasterTag,firstScriptTag);</script><script async="" src="https://www.googletagmanager.com/gtag/js?id=G-TKZNNQT9CZ"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag("js",new Date());gtag("config","G-TKZNNQT9CZ");</script><script>var llg="ko";var az=0;var amdark=0;function ljs(b){if(az){return false}var a=document.createElement("script");a.type="text/javascript";a.src="/btn-"+b+".js";document.body.innerHTML="<i style='position:absolute;top:30%;width:100%;'><center>Loading in progress...";document.body.appendChild(a)}function ctc(c){document.getElementById("img"+c).classList.remove("cop");document.getElementById("img"+c).classList.add("cop2");document.getElementById("pre"+c).style.backgroundColor="#4dff00";document.getElementById("msg"+c).style.display="inline";setTimeout(function(){document.getElementById("img"+c).classList.remove("cop2");document.getElementById("img"+c).classList.add("cop");document.getElementById("pre"+c).style.backgroundColor="";document.getElementById("msg"+c).style.display="none"},800);text=document.getElementById("pre"+c).innerText;if(window.clipboardData&&window.clipboardData.setData){return window.clipboardData.setData("Text",text)}else{if(document.queryCommandSupported&&document.queryCommandSupported("copy")){var a=document.createElement("textarea");a.textContent=text;a.style.position="fixed";document.body.appendChild(a);a.select();try{return document.execCommand("copy")}catch(b){return false}finally{document.body.removeChild(a)}}}};</script><script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script type='text/javascript'>
var ezoTemplate = 'pub_site';
var ezouid = '1';
var ezoFormfactor = '1';
</script><script data-ezscrex="false" type='text/javascript'>
var soc_app_id = '0';
var did = 173770;
var ezdomain = 'plantuml.com';
var ezoicSearchable = 1;
</script>
<script data-ezscrex='false' data-pagespeed-no-defer data-cfasync='false'>
function create_ezolpl() {
	var d = new Date();
	d.setTime(d.getTime() + (365*24*60*60*1000));
	var expires = "expires="+d.toUTCString();
	__ez.ck.setByCat("ezux_lpl_173770=" + new Date().getTime() + "|" + _ezaq.page_view_id + "|" + _ezaq.is_return_visitor + "; " + expires, 3);
}
function attach_ezolpl() {
	if (document.readyState === "complete") {
		create_ezolpl();
		return;
	}
	window.addEventListener("load", create_ezolpl);
}

__ez.queue.addFunc("attach_ezolpl", "attach_ezolpl", null, false, ['/detroitchicago/boise.js'], true, false, false, false);
</script></head><body><div id="left0"><div id="flex1"><div id="lll"><div class="cde"><div></div><div><span id="ezoic-pub-ad-placeholder-131"></span><!-- ezoic_pub_ad_placeholder-131-sidebar-120x600-131-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-131-sidebar-160x600-131-nonexxxnonexxxxxxezmaxscaleval100 --></div><div></div></div></div><div id="mmm"><div class="cde"><div><div><span id="ezoic-pub-ad-placeholder-105"></span><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-120x240-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-125x125-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-180x150-105-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-105-sidebar_middle-200x200-105-nonexxxnonexxxxxxezmaxscaleval100 --></div><ul id="menuside2"><li><a href="index.html" class="mhov"><img src="../svgrepo-house.svg" width="16" height="16"/><span>홈</span></a></li><li><a href="news.html" class="mhov"><img src="../svgrepo-text-news.svg" width="16" height="16"/><span>새소식</span></a></li><li><a href="starting.html" class="mhov"><img src="../svgrepo-rocket-3-start.svg" width="16" height="16"/><span>시작하기</span></a></li><li><a href="https://www.plantuml.com/plantuml/uml/SyfFKj2rKt3CoKnELR1Io4ZDoSa70000" class="mhov"><img src="../svgrepo-server.svg" width="16" height="16"/><span>Online Server</span></a></li><li><a href="running.html" class="mhov"><img src="../svgrepo-play.svg" width="16" height="16"/><span>사용하기</span></a></li><li><a href="faq.html" class="mhov"><img src="../svgrepo-forum.svg" width="16" height="16"/><span>F.A.Q.</span></a></li><li><a href="download.html" class="mhov"><img src="../svgrepo-add-to-online-cart.svg" width="16" height="16"/><span>다운로드</span></a></li><li><a href="../qa.html" class="mhov"><img src="../svgrepo-forum-message.svg" width="16" height="16"/><span>포럼</span></a></li><li><a href="theme.html" class="mhov"><img src="../svgrepo-palette-fill.svg" width="16" height="16"/><span>Theme</span></a></li><li><a href="preprocessing.html" class="mhov"><img src="../svgrepo-cpu.svg" width="16" height="16"/><span>전처리</span></a></li><li><a href="stdlib.html" class="mhov"><img src="../svgrepo-books-library.svg" width="16" height="16"/><span>표준 라이브러리</span></a></li><li><a href="https://crashedmind.github.io/PlantUMLHitchhikersGuide" class="mhov"><img src="../svgrepo-signpost-fill.svg" width="16" height="16"/><span>Hitchhiker&#39;s Guide</span></a></li><li><a href="guide.html" class="mhov"><img src="../svgrepo-library.svg" width="16" height="16"/><span>PDF 가이드</span></a></li></ul><div><span id="ezoic-pub-ad-placeholder-108"></span><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-120x240-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-125x125-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-180x150-108-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-108-sidebar_middle-200x200-108-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><div></div><div style="margin-bottom:35px;"><span id="ezoic-pub-ad-placeholder-186"></span><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-120x240-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-125x125-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-180x150-186-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-186-sidebar_middle-200x200-186-nonexxxnonexxxxxxezmaxscaleval100 --></div></div></div><div id="qqq"><div class="cd"><div class="aaa"></div><div class="bbborder"></div></div></div><div id="rrr"><div class="cd"><div class="aaa"></div><div style="height:5px;"></div><div class="bbb"><div class="cde"><div></div><div><span id="ezoic-pub-ad-placeholder-175"></span><!-- ezoic_pub_ad_placeholder-175-sidebar-120x600-175-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-175-sidebar-160x600-175-nonexxxnonexxxxxxezmaxscaleval100 --></div><div></div></div></div></div></div></div></div><style>#contmenu{display:flex;height:30px;width:100%;margin:0;padding:0}#contmenua{height:30px;padding-right:25px}#contmenub{z-index:15;display:inline-block;flex-grow:1;flex-shrink:1;height:30px;background-color:#edeff3}#magic{white-space:nowrap;overflow:hidden;z-index:14;position:fixed;top:0;right:50px;height:30px;width:30px}#magic2{white-space:nowrap;overflow:hidden;z-index:16;position:fixed;top:0;right:0;height:30px;width:50px;background-color:#edeff3}#magic2 img{margin:5px 0 0 5px;filter:invert(44%) sepia(27%) saturate(310%) hue-rotate(170deg) brightness(92%) contrast(83%)}#magic2:hover img{filter:invert(25%) sepia(97%) saturate(2026%) hue-rotate(201deg) brightness(91%) contrast(98%)}#magic:hover #svgrepoleft{filter:invert(22%) sepia(53%) saturate(4563%) hue-rotate(202deg) brightness(95%) contrast(98%)}#magic:hover{width:100%;height:31px}#aze{height:30px;display:flex;flex-direction:row-reverse}#aze1{height:30px;background-color:#edeff3}#aze2{height:30px;background-color:#edeff3;padding-left:10px;border-left:1px solid #d4d8de;border-bottom:1px solid #d4d8de}#aze1 img{filter:invert(46%) sepia(6%) saturate(1254%) hue-rotate(171deg) brightness(94%) contrast(92%)}#aze3{width:3px;height:30px;background-color:#edeff3}</style><div id="header"><div id="contmenu"><div id="contmenua"><div class="menu1"><a href="sequence-diagram.html">시퀀스</a><a href="use-case-diagram.html">유스케이스</a><a href="class-diagram.html">클래스</a><a href="activity-diagram-beta.html">액티비티</a><a href="component-diagram.html">컴포넌트</a><a href="state-diagram.html">상태</a><a href="object-diagram.html">객체</a><a href="deployment-diagram.html">배치</a><a href="timing-diagram.html">타이밍</a><a href="nwdiag.html">Network</a><a href="salt.html">Wireframe</a><a href="archimate-diagram.html">Archimate</a><a href="gantt-diagram.html">Gantt</a><a href="mindmap-diagram.html">MindMap</a><a href="wbs-diagram.html">WBS</a><a href="json.html">JSON</a><a href="yaml.html">YAML</a></div></div><div id="contmenub"></div></div><div id="magic"><div id="aze"><div id="aze1"><img id="svgrepoleft" width="30" height="30" src="../svgrepo-left.svg"/></div><div id="aze2"><div class="menu1"><a href="sequence-diagram.html">시퀀스</a><a href="use-case-diagram.html">유스케이스</a><a href="class-diagram.html">클래스</a><a href="activity-diagram-beta.html">액티비티</a><a href="component-diagram.html">컴포넌트</a><a href="state-diagram.html">상태</a><a href="object-diagram.html">객체</a><a href="deployment-diagram.html">배치</a><a href="timing-diagram.html">타이밍</a><a href="nwdiag.html">Network</a><a href="salt.html">Wireframe</a><a href="archimate-diagram.html">Archimate</a><a href="gantt-diagram.html">Gantt</a><a href="mindmap-diagram.html">MindMap</a><a href="wbs-diagram.html">WBS</a><a href="json.html">JSON</a><a href="yaml.html">YAML</a></div></div><div id="aze3"></div></div></div><div id="magic2"><a href="../ko-dark/component-diagram.html"><img src="../svgrepo-uxwing-light-mode-toggle.svg" height="20"/></a></div></div><div id="header2"></div><div id="root"><style>#haut1{margin:50px 0 20px;padding:0;min-height:80px}#donate{padding-top:5px;min-height:30px}</style><div id="haut1"><div style="float:left;"><div class="breadcrumb"><a href="sitemap.html">PlantUML</a><a href="sitemap-language-specification.html">Language specification</a><a href="component-diagram.html">Component Diagram</a><a href="component-diagram.html#"></a></div><div id="donate">   <a href="https://discord.gg/sXhzexAQGh" style="text-decoration: none;"><img src="https://img.shields.io/discord/1083727021328306236?color=5865F2&amp;logo=discord&amp;logoColor=white" alt="Discord server"/></a>   <a href="https://github.com/sponsors/plantuml/" style="text-decoration: none;"><img src="https://img.shields.io/github/sponsors/plantuml?logo=github"/></a>   <a href="https://www.patreon.com/bePatron?patAmt=1&amp;u=527450&amp;rid=152970" style="text-decoration: none;"><img src="https://img.shields.io/badge/patreon-122-chocolate?logo=patreon"/></a>   <a href="../lp.html" style="text-decoration: none;"><img src="https://img.shields.io/liberapay/patrons/plantuml?color=gold&amp;logo=liberapay&amp;label=liberapay"/></a>   <a href="../en/paypal.html" style="text-decoration: none;"><img src="https://img.shields.io/badge/paypal-296-skyblue?logo=paypal&amp;logoColor=red"/></a></div></div><div style="float:right; margin:3px 0;"><style>#langlist{display:flex;justify-content:space-between;width:317px;height:16px;margin:3px 10px 3px 0}.sel2{border:2px solid #fefefe}.nosel2{border:2px solid #fefefe;filter:grayscale(100%) opacity(75%)}.sel2:hover,.nosel2:hover{cursor:pointer;border:2px solid #0366d6;border-spacing:0;filter:grayscale(0);filter:contrast(200%);filter:brightness(150%)}#flag1,#flag2,#flag3,#flag4,#flag5,#flag6,#flag7,#flag8{background:url(../flags21.png);background-repeat:no-repeat;background-clip:content-box;width:22px;height:16px}#flag2{background-position:-22px 0}#flag3{background-position:-44px 0}#flag4{background-position:-66px 0}#flag5{background-position:-88px 0}#flag6{background-position:-110px 0}#flag7{background-position:-132px 0}#flag8{background-position:-154px 0}</style><div id="langlist"><div id="flag1" onclick="location.href=&#39;/en/component-diagram&#39;" class="nosel2"></div><div id="flag2" onclick="location.href=&#39;/de/component-diagram&#39;" class="nosel2"></div><div id="flag3" onclick="location.href=&#39;/es/component-diagram&#39;" class="nosel2"></div><div id="flag4" onclick="location.href=&#39;/fr/component-diagram&#39;" class="nosel2"></div><div id="flag5" onclick="location.href=&#39;/ja/component-diagram&#39;" class="nosel2"></div><div id="flag6" onclick="location.href=&#39;/ko/component-diagram&#39;" class="sel2"></div><div id="flag7" onclick="location.href=&#39;/ru/component-diagram&#39;" class="nosel2"></div><div id="flag8" onclick="location.href=&#39;/zh/component-diagram&#39;" class="nosel2"></div></div></div></div><p><style>#topsticky{z-index:2;margin:0 240px 0 0}@media screen and (min-height:800px){#topsticky{position:sticky;top:40px}}@media screen and (max-width:1500px){#topsticky{margin:0}}</style></p><div id="topsticky"><span id="ezoic-pub-ad-placeholder-647"></span><!-- ezoic_pub_ad_placeholder-647-under_page_title-320x100-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-300x50v2-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-320x50-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-468x60-647-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-647-under_page_title-728x90-647-nonexxxnonexxxxxxezmaxscaleval100 --></div><p><a style="position:relative;top:-38px;" name="b17b94e5873c5faf"></a><style>#toc{z-index:2;position:sticky;top:40px;list-style-type:none;margin:0;padding:0 10px}.chap{clear:both}#toc ul{list-style-type:none;max-height:87vh;overflow-y:auto;background:#f6f8fa;border-width:2px;border-style:groove;border-radius:3px;border-color:#e1e4e8;margin:0;padding:0}@media screen and (min-height:450px){#toc ul{max-height:89.5vh}}@media screen and (min-height:550px){#toc ul{max-height:91.5vh}}@media screen and (min-height:700px){#toc ul{max-height:93.5vh}}@media screen and (min-height:900px){#toc ul{max-height:94.5vh}}#toc li{margin:5px 5px 5px 10px;padding:0}@media screen and (max-width:1500px){#toctd{display:none}#toc{display:none}}</style><table border="0" cellspacing="0" cellpadding="0" width="100%"><tbody><tr valign="top" width="100%"><td valign="top"><h1 class="chap"><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#0"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#0"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#0"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Component Diagram</h1><p></p><strong>Component Diagram</strong>: A component diagram is a type of structural diagram used in UML (Unified Modeling Language) to visualize the organization and relationships of system components. These diagrams help in breaking down complex systems into manageable components, showcasing their interdependencies, and ensuring efficient system design and architecture. <p></p><strong>Advantages of PlantUML</strong>: <ul><li><strong>Simplicity</strong>: With PlantUML, you can create component diagrams using simple and intuitive text-based descriptions, eliminating the need for complex drawing tools.</li><li><strong>Integration</strong>: PlantUML seamlessly integrates with various tools and platforms, making it a versatile choice for developers and architects.</li><li><strong>Collaboration</strong>: The <a href="../qa.html">PlantUML forum</a> offers a platform for users to discuss, share, and seek assistance on their diagrams, fostering a collaborative community.</li></ul><a style="position:relative;top:-38px;" name="05bbb43b3d923283"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#1"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#1"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#1"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>컴포넌트</h2> 컴포넌트는 반드시 대괄호 [] 로 둘러싸여야 한다. <p></p> 컨퍼넌트를 정의할때 <code class="cod">component</code> 키워드도 사용할 수 있다. <code class="cod">as</code> 키워드를 이용해서 별명을 정의할 수도 있다. 이 별명은 뒤에서 관계를 정의할때 사용된다. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg9acf7931bb3e084cdc2141f1a6a24278" class="msg"> 🎉 Copied! </div><img width="16" height="16" id="img9acf7931bb3e084cdc2141f1a6a24278" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9acf7931bb3e084cdc2141f1a6a24278&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9acf7931bb3e084cdc2141f1a6a24278&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;9acf7931bb3e084cdc2141f1a6a24278&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre9acf7931bb3e084cdc2141f1a6a24278">@startuml

[First component]
[Another component] as Comp2
component Comp3
component [Last\ncomponent] as Comp4

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="353" height="185" class="scale" src="../imgw/img-9acf7931bb3e084cdc2141f1a6a24278.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center><a style="position:relative;top:-38px;" name="756640f0aea5f5be"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-179"></span><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-234x60-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-468x60-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-728x90-179-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-179-under_second_paragraph-970x90-179-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#2"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#2"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#2"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>인터페이스</h2><p></p> 인터페이스는 <code class="cod">()</code> 기호로 정의될 수 있다(이 기호가 원처럼 보이기 때문이다). <p></p><code class="cod">interface</code> 키워드도 인터페이스를 정의하는데 사용할 수 있다. <code class="cod">as</code> 키워드를 이용해서 별명을 정의할 수도 있다. 이 별명은 뒤에서 관계를 정의할때 사용된다. <p></p> 인터페이스를 정의하는 일은 선택(optional)이라는 것을 뒤에서 확인할 것이다. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgcc6500bc6163ed2eab1e18d812383ea2" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgcc6500bc6163ed2eab1e18d812383ea2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;cc6500bc6163ed2eab1e18d812383ea2&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;cc6500bc6163ed2eab1e18d812383ea2&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;cc6500bc6163ed2eab1e18d812383ea2&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="precc6500bc6163ed2eab1e18d812383ea2">@startuml

() &#34;First Interface&#34;
() &#34;Another interface&#34; as Interf2
interface Interf3
interface &#34;Last\ninterface&#34; as Interf4

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="258" height="171" class="scale" src="../imgw/img-cc6500bc6163ed2eab1e18d812383ea2.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="c96ad883675e26af"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#3"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#3"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#3"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>기본 예제</h2><p></p><p></p><p></p> 요소들간의 연결은 점선 (<code class="cod">..</code>), 실선 (<code class="cod">--</code>), 그리고 화살표 (<code class="cod">--&gt;</code>) 기호들의 조합으로 생성된다. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg9ec7b6cdaf77851d6b78f617317c3275" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img9ec7b6cdaf77851d6b78f617317c3275" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9ec7b6cdaf77851d6b78f617317c3275&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9ec7b6cdaf77851d6b78f617317c3275&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;9ec7b6cdaf77851d6b78f617317c3275&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre9ec7b6cdaf77851d6b78f617317c3275">@startuml

DataAccess - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="238" height="202" class="scale" src="../imgw/img-9ec7b6cdaf77851d6b78f617317c3275.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="d50d8f9219a41435"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-114"></span><!-- ezoic_pub_ad_placeholder-114-mid_content-234x60-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-468x60-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-728x90-114-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-114-mid_content-970x90-114-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#4"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#4"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#4"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>메모 사용하기</h2><p></p> 각 오브젝트에 관련된 메모를 정의하기 위해 <code class="cod">note left of</code> , <code class="cod">note right of</code> , <code class="cod">note top of</code> , <code class="cod">note bottom of</code> 키워드들을 사용할 수 있다. <p></p><p></p> 메모는 또한 <code class="cod">note</code> 키워드를 통해 단독으로 정의될 수도 있고, 다른 오브젝트들에 <code class="cod">..</code> 기호로 연결된다. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg26b0fb84af1b52e038ef6865d4805484" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img26b0fb84af1b52e038ef6865d4805484" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;26b0fb84af1b52e038ef6865d4805484&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;26b0fb84af1b52e038ef6865d4805484&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;26b0fb84af1b52e038ef6865d4805484&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre26b0fb84af1b52e038ef6865d4805484">@startuml

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

note left of HTTP : Web Service only

note right of [First Component]
  A note can also
  be on several lines
end note

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="414" height="185" class="scale" src="../imgw/img-26b0fb84af1b52e038ef6865d4805484.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><p></p><center><div class="tago">WARNING</div> <b>This translation need to be updated.</b> <div class="tago">WARNING</div></center><a style="position:relative;top:-38px;" name="58bb821cf05c48a2"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#5"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#5"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#5"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>컴포넌트를 그룹으로 나누기</h2><p></p> 컴포넌트들과 인터페이스들을 그룹으로 나누기 위해 여러가지 키워드를 사용할 수 있다: <ul><li><code class="cod">package</code></li><li><code class="cod">node</code></li><li><code class="cod">folder</code></li><li><code class="cod">frame</code></li><li><code class="cod">cloud</code></li><li><code class="cod">database</code></li></ul><p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg7999202e4eaa6184e31d231b52166132" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img7999202e4eaa6184e31d231b52166132" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;7999202e4eaa6184e31d231b52166132&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;7999202e4eaa6184e31d231b52166132&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;7999202e4eaa6184e31d231b52166132&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre7999202e4eaa6184e31d231b52166132">@startuml

package &#34;Some Group&#34; {
  HTTP - [First Component]
  [Another Component]
}

node &#34;Other Groups&#34; {
  FTP - [Second Component]
  [First Component] --&gt; FTP
}

cloud {
  [Example 1]
}


database &#34;MySql&#34; {
  folder &#34;This is my folder&#34; {
    [Folder 3]
  }
  frame &#34;Foo&#34; {
    [Frame 4]
  }
}


[Another Component] --&gt; [Example 1]
[Example 1] --&gt; [Folder 3]
[Folder 3] --&gt; [Frame 4]

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="487" height="582" class="scale" src="../imgw/img-7999202e4eaa6184e31d231b52166132.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="9a49d5ae2dd333a4"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-115"></span><!-- ezoic_pub_ad_placeholder-115-long_content-234x60-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-468x60-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-728x90-115-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-115-long_content-970x90-115-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#6"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#6"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#6"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>화살표 방향 바꾸기</h2><p></p><p></p> 기본적으로 클래스들간의 연결은 두개의 대시를 <code class="cod">--</code> 갖고 방향은 수직 방향이다. 다음처럼 한개의 대시(혹은 점)를 넣어 수평 방향 연결을 사용할 수 있다: <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg281b50b1f16c962ef80cc1151e90f390" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img281b50b1f16c962ef80cc1151e90f390" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;281b50b1f16c962ef80cc1151e90f390&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;281b50b1f16c962ef80cc1151e90f390&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;281b50b1f16c962ef80cc1151e90f390&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre281b50b1f16c962ef80cc1151e90f390">@startuml
[Component] --&gt; Interface1
[Component] -&gt; Interface2
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="202" height="184" class="scale" src="../imgw/img-281b50b1f16c962ef80cc1151e90f390.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> 연결을 반전시켜 방향을 바꿀 수도 있다: <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg950c7d656dec6910d6881f413fb9ad7b" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img950c7d656dec6910d6881f413fb9ad7b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;950c7d656dec6910d6881f413fb9ad7b&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;950c7d656dec6910d6881f413fb9ad7b&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;950c7d656dec6910d6881f413fb9ad7b&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre950c7d656dec6910d6881f413fb9ad7b">@startuml
Interface1 &lt;-- [Component]
Interface2 &lt;- [Component]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="200" height="167" class="scale" src="../imgw/img-950c7d656dec6910d6881f413fb9ad7b.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> 화살표 안에 <code class="cod">left</code>, <code class="cod">right</code>, <code class="cod">up</code>, <code class="cod">down</code> 키워드를 추가하여 방향을 바꾸는것도 가능하다: <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgdaac573c3d335615511ba404f8e979c0" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgdaac573c3d335615511ba404f8e979c0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;daac573c3d335615511ba404f8e979c0&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;daac573c3d335615511ba404f8e979c0&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;daac573c3d335615511ba404f8e979c0&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="predaac573c3d335615511ba404f8e979c0">@startuml
[Component] -left-&gt; left
[Component] -right-&gt; right
[Component] -up-&gt; up
[Component] -down-&gt; down
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="237" height="281" class="scale" src="../imgw/img-daac573c3d335615511ba404f8e979c0.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> 방향을 의미하는 단어의 첫번째 글자만 사용해서 화살표를 짧게 할 수 있다. (예를 들면, <code class="cod">-down-</code> 대신 <code class="cod">-d-</code>) 또는 두 글자를 사용해도 된다. (<code class="cod">-do-</code>). <p></p> 이 기능을 남용하지 말아야 한다는 것을 명심하자 : 그래야 별다른 수정없이도 <em>GraphViz</em>가 좋은 결과를 보여준다. <p></p><p></p><a style="position:relative;top:-38px;" name="7709bf1c8595d539"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#7"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#7"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#7"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Use UML2 notation</h2><p></p> By default <em>(from v1.2020.13-14)</em>, UML2 notation is used. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg28531ce8a7af6ebd133e7698fc119103" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img28531ce8a7af6ebd133e7698fc119103" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;28531ce8a7af6ebd133e7698fc119103&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;28531ce8a7af6ebd133e7698fc119103&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;28531ce8a7af6ebd133e7698fc119103&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre28531ce8a7af6ebd133e7698fc119103">@startuml

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="240" height="202" class="scale" src="../imgw/img-28531ce8a7af6ebd133e7698fc119103.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="ad4599d2cea99367"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-116"></span><!-- ezoic_pub_ad_placeholder-116-longer_content-234x60-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-468x60-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-728x90-116-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-116-longer_content-970x90-116-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#8"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#8"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#8"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Use UML1 notation</h2><p></p> The <code class="cod">skinparam componentStyle uml1</code> command is used to switch to UML1 notation. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgdbe1a828cf8a50de5b319b782d5de919" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgdbe1a828cf8a50de5b319b782d5de919" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;dbe1a828cf8a50de5b319b782d5de919&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;dbe1a828cf8a50de5b319b782d5de919&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;dbe1a828cf8a50de5b319b782d5de919&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="predbe1a828cf8a50de5b319b782d5de919">@startuml
skinparam componentStyle uml1

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="220" height="192" class="scale" src="../imgw/img-dbe1a828cf8a50de5b319b782d5de919.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="209c2b6d887c7fde"></a></p><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#9"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#9"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#9"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Use rectangle notation (remove UML notation)</h2><p></p> The <code class="cod">skinparam componentStyle rectangle</code> command is used to switch to rectangle notation <em>(without any UML notation)</em>. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg28344b6279d4b2cda1b64acaf31ceac2" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img28344b6279d4b2cda1b64acaf31ceac2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;28344b6279d4b2cda1b64acaf31ceac2&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;28344b6279d4b2cda1b64acaf31ceac2&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;28344b6279d4b2cda1b64acaf31ceac2&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre28344b6279d4b2cda1b64acaf31ceac2">@startuml
skinparam componentStyle rectangle

interface &#34;Data Access&#34; as DA

DA - [First Component]
[First Component] ..&gt; HTTP : use

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="220" height="192" class="scale" src="../imgw/img-28344b6279d4b2cda1b64acaf31ceac2.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="a52ab216dd03c499"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-117"></span><!-- ezoic_pub_ad_placeholder-117-longest_content-234x60-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-468x60-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-728x90-117-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-117-longest_content-970x90-117-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#10"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#10"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#10"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Long description</h2> It is possible to put description on several lines using square brackets. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgd46219a6f11d18b7532ca592cce61d15" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgd46219a6f11d18b7532ca592cce61d15" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;d46219a6f11d18b7532ca592cce61d15&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;d46219a6f11d18b7532ca592cce61d15&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;d46219a6f11d18b7532ca592cce61d15&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pred46219a6f11d18b7532ca592cce61d15">@startuml
component comp1 [
This component
has a long comment
on several lines
]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="187" height="102" class="scale" src="../imgw/img-d46219a6f11d18b7532ca592cce61d15.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="ea805db4a048a1b7"></a></p><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#11"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#11"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#11"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Individual colors</h2><p></p><p></p> You can specify a color after component definition. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg2c31195f2b7dac593a2f6cd97e6c3c76" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img2c31195f2b7dac593a2f6cd97e6c3c76" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2c31195f2b7dac593a2f6cd97e6c3c76&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2c31195f2b7dac593a2f6cd97e6c3c76&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;2c31195f2b7dac593a2f6cd97e6c3c76&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre2c31195f2b7dac593a2f6cd97e6c3c76">@startuml
component  [Web Server] #Yellow
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="135" height="67" class="scale" src="../imgw/img-2c31195f2b7dac593a2f6cd97e6c3c76.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="1f0a05cc7e120849"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-118"></span><!-- ezoic_pub_ad_placeholder-118-incontent_5-234x60-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-468x60-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-728x90-118-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-118-incontent_5-970x90-118-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#12"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#12"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#12"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Using Sprite in Stereotype</h2> You can use sprites within stereotype components. <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg125a3138bfc6f7888d6ca9130e3fe487" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img125a3138bfc6f7888d6ca9130e3fe487" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;125a3138bfc6f7888d6ca9130e3fe487&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;125a3138bfc6f7888d6ca9130e3fe487&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;125a3138bfc6f7888d6ca9130e3fe487&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre125a3138bfc6f7888d6ca9130e3fe487">@startuml
sprite $businessProcess [16x16/16] {
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFF00FFFF
FF00000000000FFF
FF000000000000FF
FF00000000000FFF
FFFFFFFFFF00FFFF
FFFFFFFFFF0FFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
FFFFFFFFFFFFFFFF
}


rectangle &#34; End to End\nbusiness process&#34; &lt;&lt;$businessProcess&gt;&gt; {
 rectangle &#34;inner process 1&#34; &lt;&lt;$businessProcess&gt;&gt; as src
 rectangle &#34;inner process 2&#34; &lt;&lt;$businessProcess&gt;&gt; as tgt
 src -&gt; tgt
}
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="315" height="152" class="scale" src="../imgw/img-125a3138bfc6f7888d6ca9130e3fe487.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><a style="position:relative;top:-38px;" name="7aa53dbdfc2137bf"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#13"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#13"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#13"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Skinparam</h2><p></p> You can use the <a href="skinparam.html">skinparam</a> command to change colors and fonts for the drawing. <p></p> You can use this command : <ul><li>In the diagram definition, like any other commands;</li><li>In an <a href="preprocessing.html">included file</a>;</li><li>In a configuration file, provided in the <a href="command-line.html">command line</a> or the <a href="ant-task.html">Ant task</a>.</li></ul><p></p> You can define specific color and fonts for stereotyped components and interfaces. <p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgb12cbf0f80cb29d14348916cde25714a" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgb12cbf0f80cb29d14348916cde25714a" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;b12cbf0f80cb29d14348916cde25714a&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;b12cbf0f80cb29d14348916cde25714a&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;b12cbf0f80cb29d14348916cde25714a&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preb12cbf0f80cb29d14348916cde25714a">@startuml

skinparam interface {
  backgroundColor RosyBrown
  borderColor orange
}

skinparam component {
  FontSize 13
  BackgroundColor&lt;&lt;Apache&gt;&gt; Pink
  BorderColor&lt;&lt;Apache&gt;&gt; #FF6655
  FontName Courier
  BorderColor black
  BackgroundColor gold
  ArrowFontName Impact
  ArrowColor #FF6655
  ArrowFontColor #777777
}

() &#34;Data Access&#34; as DA
Component &#34;Web Server&#34; as WS &lt;&lt; Apache &gt;&gt;

DA - [First Component]
[First Component] ..&gt; () HTTP : use
HTTP - WS

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="338" height="202" class="scale" src="../imgw/img-b12cbf0f80cb29d14348916cde25714a.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg9519b5d1e8f57ce485c943a8b5fe8228" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img9519b5d1e8f57ce485c943a8b5fe8228" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;9519b5d1e8f57ce485c943a8b5fe8228&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;9519b5d1e8f57ce485c943a8b5fe8228&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;9519b5d1e8f57ce485c943a8b5fe8228&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre9519b5d1e8f57ce485c943a8b5fe8228">@startuml

skinparam component {
  backgroundColor&lt;&lt;static lib&gt;&gt; DarkKhaki
  backgroundColor&lt;&lt;shared lib&gt;&gt; Green
}

skinparam node {
  borderColor Green
  backgroundColor Yellow
  backgroundColor&lt;&lt;shared_node&gt;&gt; Magenta
}
skinparam databaseBackgroundColor Aqua

[AA] &lt;&lt;static lib&gt;&gt;
[BB] &lt;&lt;shared lib&gt;&gt;
[CC] &lt;&lt;static lib&gt;&gt;

node node1
node node2 &lt;&lt;shared_node&gt;&gt;
database Production

@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="415" height="213" class="scale" src="../imgw/img-9519b5d1e8f57ce485c943a8b5fe8228.png"/></div></div></td></tr></tbody></table></p><p><a style="position:relative;top:-38px;" name="75b4984abd04b14f"></a></p><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-119"></span><!-- ezoic_pub_ad_placeholder-119-incontent_6-234x60-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-468x60-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-728x90-119-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-119-incontent_6-970x90-119-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#14"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#14"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#14"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Specific SkinParameter</h2><p></p><h3>componentStyle </h3><p></p><ul><li>By default (or with <code class="cod">skinparam componentStyle uml2</code>), you have an icon for component</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgc2639090192e7df466effcc7e134b2f8" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgc2639090192e7df466effcc7e134b2f8" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;c2639090192e7df466effcc7e134b2f8&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;c2639090192e7df466effcc7e134b2f8&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;c2639090192e7df466effcc7e134b2f8&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="prec2639090192e7df466effcc7e134b2f8">@startuml
skinparam BackgroundColor transparent
skinparam componentStyle uml2
component A {
   component &#34;A.1&#34; {
}
   component A.44 {
      [A4.1]
}
   component &#34;A.2&#34;
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]-&gt;[b]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="576" height="264" class="scale" src="../imgw/img-c2639090192e7df466effcc7e134b2f8.png"/></div></div></td></tr></tbody></table></p><p></p><ul><li>If you want to suppress it, and to have only the rectangle, you can use <code class="cod">skinparam componentStyle rectangle</code></li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg65b87dfac90e58cea51a332aa497ce23" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img65b87dfac90e58cea51a332aa497ce23" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;65b87dfac90e58cea51a332aa497ce23&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;65b87dfac90e58cea51a332aa497ce23&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;65b87dfac90e58cea51a332aa497ce23&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre65b87dfac90e58cea51a332aa497ce23">@startuml
skinparam BackgroundColor transparent
skinparam componentStyle rectangle
component A {
   component &#34;A.1&#34; {
}
   component A.44 {
      [A4.1]
}
   component &#34;A.2&#34;
   [A.3]
   component A.5 [
A.5] 
   component A.6 [
]
}
[a]-&gt;[b]
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="456" height="244" class="scale" src="../imgw/img-65b87dfac90e58cea51a332aa497ce23.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/10798">10798</a>]</em><a style="position:relative;top:-38px;" name="0a05899a20325958"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#15"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#15"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#15"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Hide or Remove unlinked component</h2><p></p> By default, all components are displayed: <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgae3fb99ee7f4170a9b24fa508136074d" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgae3fb99ee7f4170a9b24fa508136074d" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;ae3fb99ee7f4170a9b24fa508136074d&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;ae3fb99ee7f4170a9b24fa508136074d&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;ae3fb99ee7f4170a9b24fa508136074d&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preae3fb99ee7f4170a9b24fa508136074d">@startuml
component C1
component C2
component C3
C1 -- C2
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-ae3fb99ee7f4170a9b24fa508136074d.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> But you can: <ul><li><code class="cod">hide @unlinked</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgeb7cffaf1de8c5022e578e6561a5af36" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgeb7cffaf1de8c5022e578e6561a5af36" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;eb7cffaf1de8c5022e578e6561a5af36&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;eb7cffaf1de8c5022e578e6561a5af36&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;eb7cffaf1de8c5022e578e6561a5af36&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preeb7cffaf1de8c5022e578e6561a5af36">@startuml
component C1
component C2
component C3
C1 -- C2

hide @unlinked
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-eb7cffaf1de8c5022e578e6561a5af36.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove @unlinked</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg7bb6b3cac2c06fe03b38ab6840aa152b" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img7bb6b3cac2c06fe03b38ab6840aa152b" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;7bb6b3cac2c06fe03b38ab6840aa152b&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;7bb6b3cac2c06fe03b38ab6840aa152b&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;7bb6b3cac2c06fe03b38ab6840aa152b&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre7bb6b3cac2c06fe03b38ab6840aa152b">@startuml
component C1
component C2
component C3
C1 -- C2

remove @unlinked
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="70" height="167" class="scale" src="../imgw/img-7bb6b3cac2c06fe03b38ab6840aa152b.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/11052">QA-11052</a>]</em><a style="position:relative;top:-38px;" name="e966f55ffa507384"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-120"></span><!-- ezoic_pub_ad_placeholder-120-incontent_7-234x60-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-468x60-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-728x90-120-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-120-incontent_7-970x90-120-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#16"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#16"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#16"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Hide, Remove or Restore tagged component or wildcard</h2><p></p> You can put <code class="cod">$tags</code> (using <code class="cod">$</code>) on components, then remove, hide or restore components either individually or by tags. <p></p> By default, all components are displayed: <p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg1644f8b9f24634fb27aca21f57f3b888" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img1644f8b9f24634fb27aca21f57f3b888" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;1644f8b9f24634fb27aca21f57f3b888&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;1644f8b9f24634fb27aca21f57f3b888&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;1644f8b9f24634fb27aca21f57f3b888&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre1644f8b9f24634fb27aca21f57f3b888">@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-1644f8b9f24634fb27aca21f57f3b888.png"/></div></div></td></tr></tbody></table></p><p></p><p></p> But you can: <ul><li><code class="cod">hide $tag13</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgc25f15696a9d946938fd06e06925aa07" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgc25f15696a9d946938fd06e06925aa07" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;c25f15696a9d946938fd06e06925aa07&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;c25f15696a9d946938fd06e06925aa07&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;c25f15696a9d946938fd06e06925aa07&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="prec25f15696a9d946938fd06e06925aa07">@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

hide $tag13
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="163" height="167" class="scale" src="../imgw/img-c25f15696a9d946938fd06e06925aa07.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove $tag13</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf56e5569920e6e5c591cc65ec30da7cc" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf56e5569920e6e5c591cc65ec30da7cc" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f56e5569920e6e5c591cc65ec30da7cc&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f56e5569920e6e5c591cc65ec30da7cc&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f56e5569920e6e5c591cc65ec30da7cc&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref56e5569920e6e5c591cc65ec30da7cc">@startuml
component C1 $tag13
component C2
component C3 $tag13
C1 -- C2

remove $tag13
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="70" height="59" class="scale" src="../imgw/img-f56e5569920e6e5c591cc65ec30da7cc.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove $tag13 and restore $tag1</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf951862a4ab31cc4e2f54b844bbce285" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf951862a4ab31cc4e2f54b844bbce285" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f951862a4ab31cc4e2f54b844bbce285&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f951862a4ab31cc4e2f54b844bbce285&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f951862a4ab31cc4e2f54b844bbce285&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref951862a4ab31cc4e2f54b844bbce285">@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove $tag13
restore $tag1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="70" height="167" class="scale" src="../imgw/img-f951862a4ab31cc4e2f54b844bbce285.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><ul><li>or <code class="cod">remove * and restore $tag1</code> components:</li></ul><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msge3229d26c40dae9e9e23d0a0f20b6582" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imge3229d26c40dae9e9e23d0a0f20b6582" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;e3229d26c40dae9e9e23d0a0f20b6582&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;e3229d26c40dae9e9e23d0a0f20b6582&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;e3229d26c40dae9e9e23d0a0f20b6582&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pree3229d26c40dae9e9e23d0a0f20b6582">@startuml
component C1 $tag13 $tag1
component C2
component C3 $tag13
C1 -- C2

remove *
restore $tag1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="6" height="6" class="scale" src="../imgw/img-e3229d26c40dae9e9e23d0a0f20b6582.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/7337">QA-7337</a> and <a href="https://forum.plantuml.net/11052">QA-11052</a>]</em><a style="position:relative;top:-38px;" name="82248f3257b14836"></a><div style="clear:both;height:50px;"></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#17"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#17"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#17"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Display JSON Data on Component diagram</h2><p></p><h3>Simple example</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msg2e2e3910f5ed154a1fc3a82c716685df" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="img2e2e3910f5ed154a1fc3a82c716685df" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;2e2e3910f5ed154a1fc3a82c716685df&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;2e2e3910f5ed154a1fc3a82c716685df&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;2e2e3910f5ed154a1fc3a82c716685df&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pre2e2e3910f5ed154a1fc3a82c716685df">@startuml
allowmixing

component Component
()        Interface

json JSON {
   &#34;fruit&#34;:&#34;Apple&#34;,
   &#34;size&#34;:&#34;Large&#34;,
   &#34;color&#34;: [&#34;Red&#34;, &#34;Green&#34;]
}
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="224" height="239" class="scale" src="../imgw/img-2e2e3910f5ed154a1fc3a82c716685df.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><em>[Ref. <a href="https://forum.plantuml.net/15481/possible-link-elements-from-two-jsons-with-both-jsons-embeded?show=15567#c15567">QA-15481</a>]</em><p></p> For another example, see on <a href="json.html#2fyxla9p9ob6l3t3tjre">JSON page</a>. <a style="position:relative;top:-38px;" name="76402ab93d6541bf"></a><div style="clear:both;min-height:110px;margin-top:10px;"><div class="pezoic"><span id="ezoic-pub-ad-placeholder-121"></span><!-- ezoic_pub_ad_placeholder-121-incontent_8-234x60-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-468x60-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-728x90-121-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-121-incontent_8-970x90-121-nonexxxnonexxxxxxezmaxscaleval100 --></div></div><h2 class="chap"><img onclick="window.scrollTo(0,0);" title="Back to top" src="../backtop1.svg" width="20" height="20" class="backtop"/><div class="dropdown"><button class="dropbtn"><img width="16" height="16" src="../edit1.svg"/></button><div class="dropdown-content"><a href="http://alphadoc.plantuml.com/cmp/dokuwiki/ko/component-diagram#18"><img width="20" height="20" src="../dokuwiki.png"/>Edit in Dokuwiki</a><a href="http://alphadoc.plantuml.com/cmp/asciidoc/ko/component-diagram#18"><img width="20" height="20" src="../asciidoc32.png"/>Edit in Asciidoc</a><a href="http://alphadoc.plantuml.com/cmp/markdown/ko/component-diagram#18"><img width="20" height="20" src="../markdown.png"/>Edit in Markdown</a></div></div>Port [port, portIn, portOut]</h2><p></p> You can add <strong>port</strong> with <code class="cod">port</code>, <code class="cod">portin</code>and <code class="cod">portout</code> keywords. <p></p><h3>Port</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgdffcfcaac0887d4f478edfc5022f9f22" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgdffcfcaac0887d4f478edfc5022f9f22" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;dffcfcaac0887d4f478edfc5022f9f22&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;dffcfcaac0887d4f478edfc5022f9f22&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;dffcfcaac0887d4f478edfc5022f9f22&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="predffcfcaac0887d4f478edfc5022f9f22">@startuml
[c]
component C {
  port p1
  port p2
  port p3
  component c1
}

c --&gt; p1
c --&gt; p2
c --&gt; p3
p1 --&gt; c1
p2 --&gt; c1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="150" height="256" class="scale" src="../imgw/img-dffcfcaac0887d4f478edfc5022f9f22.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><h3>PortIn</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgebc399c07f4f0b31180d4edba4c66d60" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgebc399c07f4f0b31180d4edba4c66d60" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;ebc399c07f4f0b31180d4edba4c66d60&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;ebc399c07f4f0b31180d4edba4c66d60&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;ebc399c07f4f0b31180d4edba4c66d60&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="preebc399c07f4f0b31180d4edba4c66d60">@startuml
[c]
component C {
  portin p1
  portin p2
  portin p3
  component c1
}

c --&gt; p1
c --&gt; p2
c --&gt; p3
p1 --&gt; c1
p2 --&gt; c1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="150" height="256" class="scale" src="../imgw/img-ebc399c07f4f0b31180d4edba4c66d60.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><h3>PortOut</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf3682745cb9fb9f4ddd017a62c4ee1e0" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf3682745cb9fb9f4ddd017a62c4ee1e0" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f3682745cb9fb9f4ddd017a62c4ee1e0&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f3682745cb9fb9f4ddd017a62c4ee1e0&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f3682745cb9fb9f4ddd017a62c4ee1e0&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref3682745cb9fb9f4ddd017a62c4ee1e0">@startuml
component C {
  portout p1
  portout p2
  portout p3
  component c1
}
[o]
p1 --&gt; o
p2 --&gt; o
p3 --&gt; o
c1 --&gt; p1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="157" height="255" class="scale" src="../imgw/img-f3682745cb9fb9f4ddd017a62c4ee1e0.png"/></div></div></td></tr></tbody></table></p><p></p><p></p><h3>Mixing PortIn &amp; PortOut</h3><p><table class="coptable" valign="top" cellspacing="0" cellpadding="0" border="0"><tbody><tr><td valign="top"><div id="msgf5f401b9cd65a8b934f735e5e3d7e6c2" class="msg"> 🎉 Copied! </div><img loading="lazy" width="16" height="16" id="imgf5f401b9cd65a8b934f735e5e3d7e6c2" title="Copy to clipboard" class="cop" src="../clipboard1.svg" onclick="ctc(&#39;f5f401b9cd65a8b934f735e5e3d7e6c2&#39;)"/><br/><img loading="lazy" width="16" height="16" title="Edit online" class="cop" src="../edit1.svg" onclick="javascript:ljs(&#39;f5f401b9cd65a8b934f735e5e3d7e6c2&#39;)"/></td><td><div class="mytab" onclick="javascript:ljs(&#39;f5f401b9cd65a8b934f735e5e3d7e6c2&#39;)"><div class="mycell0"><code onmouseover="az=1" onmouseout="az=0"><pre id="pref5f401b9cd65a8b934f735e5e3d7e6c2">@startuml
[i]
component C {
  portin p1
  portin p2
  portin p3
  portout po1
  portout po2
  portout po3
  component c1
}
[o]

i --&gt; p1
i --&gt; p2
i --&gt; p3
p1 --&gt; c1
p2 --&gt; c1
po1 --&gt; o
po2 --&gt; o
po3 --&gt; o
c1 --&gt; po1
@enduml
</pre></code></div><div class="mycell"><img loading="lazy" width="157" height="419" class="scale" src="../imgw/img-f5f401b9cd65a8b934f735e5e3d7e6c2.png"/></div></div></td></tr></tbody></table></p><p></p></td><td id="toctd" valign="top" style="max-width:240px;min-width:240px;"><div id="toc"><ul><li><a href="component-diagram.html#05bbb43b3d923283">컴포넌트</a></li><li><a href="component-diagram.html#756640f0aea5f5be">인터페이스</a></li><li><a href="component-diagram.html#c96ad883675e26af">기본 예제</a></li><li><a href="component-diagram.html#d50d8f9219a41435">메모 사용하기</a></li><li><a href="component-diagram.html#58bb821cf05c48a2">컴포넌트를 그룹으로 나누기</a></li><li><a href="component-diagram.html#9a49d5ae2dd333a4">화살표 방향 바꾸기</a></li><li><a href="component-diagram.html#7709bf1c8595d539">Use UML2 notation</a></li><li><a href="component-diagram.html#ad4599d2cea99367">Use UML1 notation</a></li><li><a href="component-diagram.html#209c2b6d887c7fde">Use rectangle notation (remove UML notation)</a></li><li><a href="component-diagram.html#a52ab216dd03c499">Long description</a></li><li><a href="component-diagram.html#ea805db4a048a1b7">Individual colors</a></li><li><a href="component-diagram.html#1f0a05cc7e120849">Using Sprite in Stereotype</a></li><li><a href="component-diagram.html#7aa53dbdfc2137bf">Skinparam</a></li><li><a href="component-diagram.html#75b4984abd04b14f">Specific SkinParameter</a></li><li><a href="component-diagram.html#0a05899a20325958">Hide or Remove unlinked component</a></li><li><a href="component-diagram.html#e966f55ffa507384">Hide, Remove or Restore tagged component or wildcard</a></li><li><a href="component-diagram.html#82248f3257b14836">Display JSON Data on Component diagram</a></li><li><a href="component-diagram.html#76402ab93d6541bf">Port [port, portIn, portOut]</a></li></ul></div></td></tr></tbody></table></p><p></p><span id="ezoic-pub-ad-placeholder-104"></span><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-234x60-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-468x60-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-728x90-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-970x250-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-300x250x3-104-nonexxxnonexxxxxxezmaxscaleval100 --><!-- ezoic_pub_ad_placeholder-104-bottom_of_page-970x90-104-nonexxxnonexxxxxxezmaxscaleval100 --></div><style>.btm{text-align:center}.btm a{text-decoration:none;color:#637282}.btm a:hover{color:#0366d6}</style><div class="btm"><hr/><a href="https://g.ezoic.net/privacy/plantuml.com"><small>Privacy Policy</small></a>      <a href="../direct-sales.html"><small>Advertise</small></a><p></p></div><script>var sc_project=11140436;var sc_invisible=1;var sc_security="f9fe83d7";</script><script async="" src="https://www.statcounter.com/counter/counter.js"></script><!--[selectrongo:done]--><script type="text/javascript">
				var __inScopeForCCPA = false;
		function __uspapi(command, version, callback) {
			var response = null;
			var successs = false;
			if (command === "getUSPData" && version === 1) {
				var uspString = "1"; // Version
				if (__inScopeForCCPA) {
					uspString += "N"; // Has Explicit Notice for Opt Out been provided (ex footer or minor consent modal)
					var result;
					var consentCookie = (result = new RegExp('(?:^|; )ezoccpaconsent=([^;]*)').exec(document.cookie)) ? (result[1]) : null;
					if (consentCookie === "nonconsent") {
						uspString += "Y";
					}
					else {
						uspString += "N";
					}
					uspString += "N" // Is pub a signatory to the IAB Limited Service Provider Agreement (http://www.iabprivacy.com/)
				}
				else {
					uspString += "---";
				}
				response = {
					uspString: uspString,
					version: 1
				};
				success = true;
			}
			return callback(response, success);
		};
		function __receiveUspapiMessage(event) {
			if (event.data.hasOwnProperty('__uspapiCall')) {
				__uspapi('getUSPData', 1, function(uspData, success) {
					event.source.postMessage({
						__uspapiReturn: {
							returnValue: uspData,
							success: success,
							callId: event.data.__uspapiCall.callId
						}
					},
					event.origin);
				});
			}
			return null;
		};
		window.addEventListener("message", __receiveUspapiMessage, false);
</script>
<script>__ez.queue.addFile('/tardisrocinante/vitals.js', '/tardisrocinante/vitals.js?gcb=2&cb=3', false, ['/parsonsmaize/mulvane.js'], true, false, true, false);</script>
<script>var _audins_dom="plantuml_com",_audins_did=173770;__ez.queue.addDelayFunc("audins.js","__ez.script.add", "//go.ezodn.com/detroitchicago/audins.js?cb=195-2");</script><noscript><div style="display:none;"><img src="https://pixel.quantserve.com/pixel/p-31iz6hfFutd16.gif?labels=Domain.plantuml_com,DomainId.173770" border="0" height="1" width="1" alt="Quantcast"/></div></noscript>
<script>__ez.queue.addFile('/beardeddragon/drake.js', '/beardeddragon/drake.js?gcb=2&cb=4', false, [], true, false, true, false);</script>
<script type="text/javascript" style='display:none;'>var __ez_dims = (function() {
		var setCookie = function( name, content, expiry ) {
			return document.cookie = name+'='+content+((expiry)?';expires='+(new Date(Math.floor(new Date().getTime()+expiry*1000)).toUTCString()):'')+';path=/';
		};
		var ffid = 1;
		var oh = window.screen.height;
		var ow = window.screen.width;
		var h = ffid === 1 ? oh : (oh > ow) ? oh : ow;
		var w = ffid === 1 ? ow : (oh > ow) ? ow : oh;
		var uh = window.innerHeight || document.documentElement.clientHeight || document.getElementsByTagName('body')[0].clientHeight;
		var uw = window.innerWidth || document.documentElement.clientWidth || document.getElementsByTagName('body')[0].clientWidth;
		setCookie('ezds', encodeURIComponent('ffid='+ffid+',w='+w+',h='+h), (31536e3*7));
		setCookie('ezohw', encodeURIComponent('w='+uw+',h='+uh), (31536e3*7));
	})();</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/parsonsmaize/chanute.js', '/parsonsmaize/chanute.js?a=a&cb=7&dcb=195-2&shcb=34', true, ['/parsonsmaize/mulvane.js'], true, false, false, false);</script>
<script type='text/javascript' style='display:none;' async>__ez.queue.addFile('/porpoiseant/jellyfish.js', '/porpoiseant/jellyfish.js?a=a&cb=10&dcb=195-2&shcb=34', false, [], true, false, false, false);</script></body></html>